<template>
    <cardComponent class="accountBalance" pageTitle="手机闪付账号管理">
        <template slot="cardBody">
            <el-form
                class="searchForm"
                ref="searchForm"
                :model="searchForm"
                :inline="true"
                size="small"
                label-width="80px"
            >
                <el-form-item label="卡号:" label-position="left">
                    <el-select v-model="searchForm.CARDNBR">
                        <el-option
                            v-for="(item, i) in cardList_3601"
                            :label="item.CARDNBR"
                            :value="item.CARDNBR"
                            :key="i"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    :loading="searchLoading"
                    @click="handleSearch"
                >查 询</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                >重 置</el-button>
            </el-form>
            <!-- 查询信息显示 -->
            <el-table :data="tableData" width="100%" border stripe class="heard-bg business_table">
                <el-table-column label width="70">
                    <template slot-scope="scope">
                        <el-radio v-model="isChecked" :label="scope.row">{{""}}</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="状态变更时间" prop="MODTIME"></el-table-column>
                <el-table-column label="状态变更流水号" prop="SEQNO"></el-table-column>
                <el-table-column label="操作类型" prop="CLSFLAG"></el-table-column>
                <el-table-column label="变更前状态" prop="BEFSTS"></el-table-column>
                <el-table-column label="并更后状态" prop="AFTSTS"></el-table-column>
                <el-table-column label="操作员号" prop="OPENO"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div style="margin-top: 16px;">
                <el-button
                    type="primary"
                    size="small"
                    @click="handleChangePage('pre')"
                    :disabled="currentApprefIndex <= 0"
                >上一页</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="handleChangePage('next')"
                    :disabled="!nextButtonFlag"
                >下一页</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="check"
                >暂 停</el-button>
                <el-button type="primary" size="small" @click="unlockcheck">恢 复</el-button>
                <el-button type="primary" size="small" @click="cancelcheck">注 销</el-button>
                <el-button type="primary" size="small" @click="qoutacheck">免密限额更新</el-button>
            </div>
        </template>
    </cardComponent>
</template>
<script>
import { mapState } from 'vuex'
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { isEmptyObject } from '@/utils/Object'

export default {
    name: 'phonepayAccountManage',
    data() {
        return {
            title: 'accountBalance',
            searchLoading: false, // 确定按钮loading
            searchForm: {
                CARDNBR: '', // 虚拟卡号
            },
            tableData: [],
            pagingDataList: [], // 翻页上送字段列表
            nextButtonFlag: false, // 下翻页按钮 显示控制阀
            currentApprefIndex: 0, // 当前页最后一条记录的申请编号的索引
            isChecked: {},
        };
    },
    components: {
        cardComponent,
    },
    computed: mapState({
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),
    mounted() {
        if (this.cardList_3601.length) {
            this.searchForm.CARDNBR = this.cardList_3601[0].CARDNBR;
        }
    },

    methods: {
        // 激活
        active() {
            if (isEmptyObject(this.isChecked)) {
                this.$message.warning('请选择授权记录！');
                return;
            }
        },
        // 暂停
        check() {
            if (isEmptyObject(this.isChecked)) {
                this.$message.warning('请选择授权记录！');
                return;
            }
        },
        // 恢复
        unlockcheck() {
            if (isEmptyObject(this.isChecked)) {
                this.$message.warning('请选择授权记录！');
                return;
            }
        },
        // 注销
        cancelcheck() {
            if (isEmptyObject(this.isChecked)) {
                this.$message.warning('请选择授权记录！');
                return;
            }
        },
        // 免密限额更新
        qoutacheck() {
            if (isEmptyObject(this.isChecked)) {
                this.$message.warning('请选择授权记录！');
                return;
            }
        },
        // 确定按钮点击处理事件
        handleSearch() {
            this.searchLoading = true;
            let NEXTDAY = this.searchForm.startDate;
            let NEXTMPNO = 0;
            if (this.pagingDataList.length) { // 判断翻页上传字段取值
                NEXTDAY = this.pagingDataList[this.currentApprefIndex].NEXTDAY;
                NEXTMPNO = this.pagingDataList[this.currentApprefIndex].NEXTMPNO;
            }
            this.defaultParams.sysHead.busiName = '手机闪付账号查询';
            const appBody = {
                FPANNO: this.searchForm.CARDNBR.trim() || '', // 实体卡号
                ISPEC: 'DPLST',
                ACTION: 'I',
                DPANNO: this.pagingDataList.length === 0 ? '' : this.pagingDataList[this.currentApprefIndex], // 设备卡号
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
            }
            this.defaultParams.body.appHead.source = 'CV';
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams))
            defaultParams.body.appHead.TRXTYPE = '6640'
            defaultParams.body.appBody = appBody;
            this.$post.common.transPort(defaultParams).then((res) => {
                this.searchLoading = false;
                if (res.status === 200) { // 接口请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.tableData = result.body.appBody;
                        const currentPagingData = {
                            NEXTDAY: result.body.appBody.dataList[result.body.appBody.dataList.length - 1].NEXTDAY,
                            NEXTMPNO: result.body.appBody.dataList[result.body.appBody.dataList.length - 1].NEXTMPNO,
                        };
                        this.nextButtonFlag = !(result.body.appBody.dataList.length < 10);
                        let flag = false;
                        let currentIndex;
                        this.pagingDataList.forEach((item, index) => { // 判断此次查询数据最后一条记翻页分期付款序号是否在已有列表中
                            if (item.NEXTMPNO === currentPagingData.NEXTMPNO) {
                                flag = true;
                                currentIndex = index;
                            }
                        });
                        if (flag) { // 存在
                            this.currentApprefIndex = currentIndex;
                        } else {
                            this.pagingDataList.push(currentPagingData);
                            this.currentApprefIndex = this.pagingDataList.length - 1;
                        }
                    } else {
                        this.$message.error(result.sysHead.rspMsg);
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },
        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.currentApprefIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.currentApprefIndex = this.currentApprefIndex - 2;
                }
                this.handleSearch();
            } else { // 切换到下一页
                this.handleSearch();
            }
        },
        // 重置按钮点击事件处理
        handleReset() {
            this.$refs.searchForm.resetFields();
        },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.accountBalance {
    // background-color: #fff;
    // border-radius: 8px;
    min-height: 100%;
    overflow: hidden;
    .searchContent {
        margin-bottom: 16px;

        .infoItem {
            font-size: 16px;
            color: #999;
            text-align: left;
            margin-bottom: 20px;

            .title {
                color: #000;
                text-align: right;
                padding-right: 20px;
            }
        }
    }
}
</style>
